<template>
	<view class="discover">
		<Header></Header>
		<scroll-view class="main" scroll-y="true" enable-flex>
			<view class="categoryList">
				<view class="categoryItem" v-for="(c,index) in categoryList" :key="index">
					<image :src="c.imageUrl" ></image>
					<text>{{c.name}}</text>
				</view>
				<view class="textList" >
					<view class="textItem" :class="{'orange':index===0,'blue':index===1}" v-for="(item,index) in textList" :key="index">
						<image :src="item.imgUrl" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="appList" v-for="(apps,index) in appList" :key="index">
				<view class="title">
					<text>{{apps.title}}</text>
					<image src="../../static/gray.png"></image>
				</view>
				<swiper  circular="true" :duration="1000" v-if="apps.type===0">
					<swiper-item  v-for="(banner,index) in apps.bannerList" :key="banner.id" class="swiper-item" >
						<view class="banner">
							<image class="bannerImg" :src="banner.imgUrl" mode=""></image>
							<text class="bannerText">{{banner.title}}</text>
						</view>
					</swiper-item>
				</swiper>
				<swiper next-margin="140rpx"  class="msgSwiper" circular="true" :duration="1000" v-else-if="apps.type===1">
					<swiper-item class="msg-item" v-for="msgs in apps.msgList" :key="msgs.id">
						<view class="msg">
							<image class="msgBcgImg" :src="msgs.imgUrl" ></image>
							<view class="contents">
								<view class="header">
									<image class="avatar" :src="msgs.author.avatar" mode=""></image>
									<text>{{msgs.author.name}}</text>	
								</view>
								<view class="body">
									<text>{{msgs.contents}}</text>
								</view>
								<view class="bottom">
									<view class="gameName">
										<text>{{msgs.author.name}}</text>
									</view>
								</view>
								<view class="score" >
									<image src="../../static/start.png" v-for="index in msgs.score" :key="index"></image>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<swiper :duration="1000" v-else class="swiperGame">
					<swiper-item  v-for="(banner,index) in apps.bannerList" :key="banner.id" class="swiperitem" >
						<view class="gameItem">
							<image :src="banner.imgUrl" mode=""></image>
							<view class="num">{{index+1}}/{{apps.bannerList.length}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		mounted(){
			this.getFindData()
		},
		methods:{
			getFindData(){
				this.$store.dispatch('getFindData')
			}
		},
		computed:{
			...mapState({
				categoryList:state=>state.discover.categoryList,
				textList:state=>state.discover.textList,
				appList:state=>state.discover.appList,
				swiperList:state=>state.discover.swiperList
			})
		},
		onReachBottom(e) {
		    this.$store.commit('GET_MOREAPPLIST')
		}
	}
</script>

<style lang="stylus">
	.discover
		.main
			.categoryList
				display flex
				flex-wrap wrap
				justify-content space-between
				padding 16rpx 32rpx 8rpx 32rpx
				.categoryItem
					width 120rpx
					padding-right 10rpx
					margin-bottom 24rpx
					text-align center
					font-size 26rpx
					image
						width 100rpx
						height 100rpx
				.textList
					width 100%
					display flex
					justify-content space-between
					.textItem
						height 100rpx
						width 30%
						background-color rgba(21,197,206,0.1)
						padding 6rpx 8rpx
						display flex
						flex-direction column
						align-items center
						border-radius 15rpx
						color rgb(21,197,206)
						font 700 28rpx ""
						image
							width 54rpx
							height 54rpx
						text
							margin-top -4rpx
						&.orange
							color rgb(255, 170, 0);
							background-color rgba(255, 170, 0,0.1)
						&.blue
							color rgb(26, 178, 255);
							background-color rgba(26, 178, 255,0.1)
			.appList
				.title
					display flex
					padding 32rpx 32rpx 8rpx 32rpx
					align-items center
					font 700 34rpx ""
					line-height 48rpx
					justify-content space-between
					image
						width 24rpx
						height 24rpx
				.swiper-item
					padding 30rpx
					width 130rpx !important
					height auto 
					display flex
					flex-direction column
					text-align center
					.banner
						.bannerImg
							width 128rpx
							height 128rpx
							border-radius 26rpx
						.bannerText
							margin-top 12rpx
							font-size 28rpx
							display:-webkit-box;
							 -webkit-box-orient:vertical;
							 -webkit-line-clamp:1;
							 overflow:hidden;
				.msgSwiper
					height 560rpx !important
					.msg-item
						padding-bottom 30rpx
						.msg
							margin 0 32rpx
							width 90.5% !important
							height 550rpx !important
							border-radius 12rpx
							overflow hidden
							.msgBcgImg
								width 100%
								height 220rpx
							.contents
								margin-top -9rpx
								height 75%
								border-bottom-left-radius  12rpx
								border-bottom-right-radius  12rpx
								background-color #f5f7f8
								.header
									.avatar
										position absolute
										left 40rpx
										top 178rpx
										width 90rpx
										height 90rpx
										border-radius 50%
									text
										position absolute
										left 152rpx
										top 227rpx
								.body
									padding 60rpx 26rpx 40rpx 26rpx
									color #868c92
									font-size 28rpx
									line-height 40rpx
									text
										display -webkit-box
										-webkit-box-orient vertical
										-webkit-line-clamp 4;
										overflow hidden
								.bottom
									text-align center
									margin-bottom 20rpx
									.gameName
										display flex
										align-items center
										justify-content center
										font-size 28rpx
										color #b7bcbf
										// display inline-block
										&::after
											content ""
											height 2rpx
											width 40rpx
											background-color rgba(29,33,39,.12)
											display block
										&::before
											content ""
											height 2rpx
											width 40rpx
											background-color rgba(29,33,39,.12)
											display block
										text
											padding 0 20rpx
								.score
									position absolute
									display flex
									top 232rpx
									right 60rpx
									image
										width 25rpx
										height 25rpx
										margin-right 10rpx
				.swiperGame
					height 300rpx
					.swiperitem
						width 460rpx !important
						height 260rpx !important
						position relative
						border-radius 12rpx
						.gameItem
							width 460rpx !important
							height 260rpx !important
							margin-left 32rpx
							border-radius 12rpx
							overflow hidden
						image
							width 100%
							height 100%
						.num
							line-height 34rpx
							font-size 24rpx
							color #FFFFFF
							background-color rgba(0,0,0,.4)
							position absolute
							right 24rpx
							top 24rpx
							border-radius 12rpx
							padding 4rpx 12rpx
					
										
					
					
				
</style>
